<template>
  <uni-popup ref="popupRef" type="bottom" :isMaskClick="false">
		<view class="content">
			<view class="select">
				<view class="select-item" @tap="emit('selected', item)" v-for="item in arr" :key="item">
					{{item}} 
				</view>
			</view>
			<view class="btn" @tap="close"> 取消 </view>
		</view>
  </uni-popup>
</template>

<script setup>
  import { ref } from 'vue';
  const emit = defineEmits(['selected'])
  const popupRef = ref()
  defineProps({
		arr: {
			type: Array,
			default: ['同城配送', '门店自提']
		}
	})
  const open = () => {
    popupRef.value.open()
  }
  const close = () => {
    popupRef.value.close()
  }
  defineExpose({
    open,
    close
  })
</script>

<style lang="scss" scoped>
	.content {
		color: #000000;
		font-size: 17px;
		font-weight: 400;
		overflow: hidden;
		background-color: #f4f5f7;
		border-radius: 10px 10px 0 0;
		.select {
			background-color: #FFFFFF;
			.select-item {
				height: 56px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 1px solid #EEEEEE;
				box-sizing: border-box;
				&:nth-last-of-type(1) {
					border-bottom: none;
				}
			}
		}
		.btn {
			height: 56px;
			display: flex;
			margin-top: 10px;
			align-items: center;
			justify-content: center;
			background-color: #FFFFFF;
		}
	}
  .popup {
    width: 269px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    padding: 30px 22px 20px 22px ;
    box-sizing: border-box;
    .title {
      height: 21px;
      font-weight: bold;
      font-size: 17px;
      color: #333333;
      line-height: 21px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-top: 15px;
      margin-bottom: 10px;
    }
    .tips {
      width: 194px;
      height: 40px;
      font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
      font-weight: 400;
      font-size: 14px;
      color: #999999;
      line-height: 21px;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
    .btn {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 24px;
      font-size: 14px;
      .cancel, .confirm {
        width: 108px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        border-radius: 109px;
        box-sizing: border-box;
      }
      .cancel {
        color: #333333;
        background: #FFFFFF;
        border: 1px solid #999999;
      }
      .confirm {
        color: #ffffff;
        background: #FF3B1E;
      }
    }
  }
</style>